<template>
	<div class="form-info">
		<el-input maxlength="20" type="text" v-model="name" style="width: 80%" placeholder="请输入您的名称" />
		<el-input maxlength="20" type="text" v-model="phone" style="width:  80%" placeholder="请输入您的联系方式,如微信号,手机号" />
		<el-input maxlength="40" type="text" v-model="demand" style="width:  80%" placeholder="请输入您的需求说明,如:想建个网站" />
		<div style="margin-top: 20px;">
			<el-button @click="setDemand" type="primary" round>提交</el-button>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import axiosIns from '../util/axios';
	import { ElMessage } from 'element-plus'
	import { ElMessageBox } from 'element-plus'
	const name = ref('');
	const phone = ref('');
	const demand = ref('');
	const setDemand = () => {
		if (!name.value.trim() || !phone.value.trim() || !demand.value.trim()) {
			ElMessage({
				message: '请输入全部信息后提交！',
				type: 'warning', // 可选：'info', 'success', 'warning', 'error'
				duration: 2000, // 可选：消息显示的时间，单位毫秒，默认3000
			});
			return;
		}
		console.log('按钮被点击了！');
		const param = {
			"userId": "id-" + localStorage.getItem("userId"),
			"userName": "nm-" + name.value,
			"userPhone": "ph-" + phone.value,
			"userDemand": "dd-" + demand.value,
		}
		axiosIns.post("/setUser", param).then(res => {
			console.log(res);
			ElMessageBox.alert("提交成功,请确保您的联系方式通畅！", "温馨提示", {
				confirmButtonText: '确认',
				callback: function () {
					location.reload();
				}
			});
		}).catch(err => {
			ElMessage({
				message: err,
				type: 'error', // 可选：'info', 'success', 'warning', 'error'
				duration: 2000, // 可选：消息显示的时间，单位毫秒，默认3000
			});
		})
	};
</script>
<style>
	.el-button {
		width: 30%;
	}

	.el-input {
		margin-top: 10px;
	}

	.form-info {
		text-align: center;
	}
</style>